<template>
  <div class="jbc-container jbc-goods">
    <jbc-menu />
    <div class="jbc-goods__body">
      <div>
        <el-breadcrumb v-if="pathList.length" style="margin-top: 5px;padding: 12px 0 17px;"
          :separator-icon="ArrowRight">
          <el-breadcrumb-item v-for="path in pathList" :key="path.id" :to="path.url">{{ path.name
            }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="jbc-goods__section">
        <div class="jbc-goods__header">
          <goods-pic :pic-list="picList"></goods-pic>
          <div class="jbc-goods__info">
            <div class="jbc-goods__info--header">
              <div class="jbc-goods__info--title">{{ goodsInfo.title }}</div>
              <div class="jbc-goods__info--no">商品编号：{{ goodsInfo.code }}</div>
              <div class="jbc-goods__info--desc" v-if="goodsInfo.scenario">使用场景：{{ goodsInfo.scenario }}</div>
              <div class="jbc-goods__info--price">{{ $numberPriceDisplay(goodsInfo.price) }}</div>
              <div class="jbc-goods__info--number"><span>数量</span><el-input-number style="margin: 0 10px;" size="large"
                  v-model="state.count" :min="1" :max="goodsInfo.inventory" /><span>库存 {{
                    $numberDisplay(goodsInfo.inventory) }} 件</span></div>
            </div>
            <div class="jbc-goods__button">
              <div class="jbc-goods__button--main">
                <el-button color="#FF9902" style="--el-color-black: var(--el-color-white);" size="large"
                  :loading="loading" @click="handleCommand('AddCar')">加入购物车</el-button>
                <el-button color="#D6000F" size="large" :loading="loading"
                  @click="handleCommand('BuyNow')">立即购买</el-button>
              </div>
              <div class="jbc-goods__button--other">
                <el-button :icon="goodsInfo.isfollow === 'Y' ? 'StarFilled' : 'Star'" size="large"
                  :class="{ active: goodsInfo.isfollow === 'Y' }" @click="handleCommand('Follow')">收藏</el-button>
                <el-button icon="Share" size="large" @click="handleCommand('Share')">分享</el-button>
                <el-button icon="Pointer" :class="{ active: goodsInfo.isLike === 'Y' }" size="large"
                  @click="handleCommand('Like')">点赞</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="jbc-goods__article" v-html="goodsInfo.bz"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="goods">
import { ArrowRight } from "@element-plus/icons-vue"
import { appViewGetSkuIdGet, appViewLikeGet, appViewFollowGet, appViewAddCarsGet } from '@/api/goods'
import { computed, reactive } from 'vue'
import { dialogCustomStyle } from '@/components/webCustom/utils'
import useClipboard from 'vue-clipboard3'
import { appOrderAddPost } from '@/api/order'
import useShoppingCartStore from '@/components/webCustom/shoppingCart'
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const pathList = ref([{ id: '-1', name: '首页', url: '/' }, { id: '1', name: '商品分类', url: '/type' }, { id: '2', name: '商品详情' }])
const goodsInfo = ref({})
route.params.id && appViewGetSkuIdGet({ params: { skuId: route.params.id } }).then((res) => {
  console.log(res)
  goodsInfo.value = res.data
}).catch((err) => {
  console.log(err)
})
const picList = computed(() => {
  const list = goodsInfo.value.imgs ? goodsInfo.value.imgs.split(',') : []
  if (goodsInfo.value.videourl) {
    list.unshift(goodsInfo.value.videourl)
  }
  return list
})
const state = reactive({
  count: 1,
  skuId: route.params.id
})
const loading = ref(false)
const { toClipboard } = useClipboard()
const handleCommand = (type) => {
  switch (type) {
    case 'Like':
      appViewLikeGet({ params: { actionType: 1, valId: state.skuId } }).then((res) => {
        goodsInfo.value.isLike = res.data
        proxy.$modal.msgSuccess(`成功${res.data === 'Y' ? '' : '取消'}点赞`)
      }).catch((err) => {
      })
      break;
    case 'Follow':
      appViewFollowGet({ params: { actionType: 1, valId: state.skuId } }).then((res) => {
        goodsInfo.value.isfollow = res.data
        proxy.$modal.msgSuccess(`成功${res.data === 'Y' ? '' : '取消'}收藏`)
      }).catch((err) => {
      })
      break;
    case 'AddCar':
      loading.value = true
      appViewAddCarsGet({ params: state }).then((res) => {
        proxy.$modal.msgSuccess('成功加入购物车')
        useShoppingCartStore().init()
      }).catch((err) => {
      }).finally(() => {
        loading.value = false
      })
      break;
    case 'Share':
      proxy.$modal.confirm(
        `<div style="font-weight: bold;font-size: 16px;color: #323232;line-height: 21px;">复制链接分享商品</div><div style="background-color: #F5F6F5;font-size: 16px;color: #323232;line-height: 21px;padding: 12px 18px;margin-top: 14px;">${window.location.href}</div>`,
        { title: "分享商品", type: '' },
        {
          dangerouslyUseHTMLString: true,
          draggable: true,
          customClass: 'custom-message-box',
          customStyle: dialogCustomStyle({ width: '572px' }),
          showClose: false,
          confirmButtonText: '复制链接',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '复制中...'
              toClipboard(window.location.href).then(flag => {
                console.log(flag)
                proxy.$modal.msgSuccess(`链接已复制成功`)
                done()
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                }, 300)
              }).catch(e => {
                console.log(e)
                proxy.$modal.msgError('链接已复制失败，请手动复制')
                instance.confirmButtonLoading = false
              })
            } else {
              done()
            }
          }
        }
      ).catch((err) => { console.log(err) })
      break;
    case 'BuyNow':
      loading.value = true
      appOrderAddPost({ body: { type: 2, skuId: state.skuId, count: state.count } }).then(res => {
        loading.value = false
        router.push({ path: `/payment/${res.data}` })
      }).catch((err) => {
      }).finally(() => {
        loading.value = false
      })
      break;
    default:
      proxy.$modal.msg('敬请期待！')
      break;
  }
}
</script>

<style lang="scss" scoped>
.jbc-goods {
  &__body {
    width: var(--box-width);
    margin: 0 auto;
  }

  &__section {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
  }

  &__header {
    display: flex;
    margin-bottom: 56px;
  }

  &__info {
    margin-left: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;

    &--title {
      font-weight: bold;
      font-size: 26px;
      color: #323232;
      line-height: 44px;
    }

    &--no {
      color: #FF9902;
      margin-top: 12px;
    }
    &--desc {
      color: var(--jbc-font-color-light);
      font-size: 16px;
      line-height: 21px;
      margin-top: 12px;
    }

    &--price {
      color: var(--jbc-color);
      margin-top: 44px;
      display: flex;
      font-size: 38px;
    }

    &--number {
      color: var(--jbc-font-color-light);
      margin-top: 44px;
    }
  }

  &__button {
    &--main {}

    &--other {
      margin-top: 36px;

      & :deep(.el-button--large) {
        font-size: 16px;

        .el-icon {
          font-size: 20px;
        }

        &.active {
          & .el-icon {
            --color: var(--jbc-color);
          }
        }
      }
    }
  }

  &__article {
    padding-top: 93px;
    background-image: url('../assets/images/jbc/jbc_goods.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
  }

}

:deep(.jbc-goods__article) {
  img {
    max-width: 100%;
  }
}
</style>